<template>
	<div class="bigView">
		<view class="topView">
			<view class="homeTitle" :style="[{marginTop:TopHeight-40 + 'px'}]">
				魅力嘉园
			</view>
		</view>
		<z-paging ref="paging" :show-default-loading-more-text="false" v-model="dataList" default-page-size="5"  @query="queryList">
			<!-- :style="[{height:TopHeight + 'px'}]" -->
			<!-- <view class="searchView" :style="[{marginTop:TopHeight + 'px'}]">
				<view style="width: 53rpx;margin-left: 10px;display: flex;align-items: center;justify-content: center;">
					<image src="../../static/img/icon_search.png" style="width: 53rpx;height: 53rpx"></image>
				</view>
				<u--input
				    placeholder="搜索"
				    border="surround"
				    v-model="searchValue"
					@confirm="searchHandle"
				  ></u--input>
			</view> -->
			<view class="topSwiper" :style="[{marginTop:TopHeight + 'px'}]">
				<u-swiper
					:list="list1"
					:height="200"
					:autoplay="list1.length>1"
					indicator
					style="border-radius: 30px;"
					radius="10"
					@click="swiperHandle"
				></u-swiper>
			</view>
			<view style="margin-top: 13px;">
				<u-grid
					:border="false"
					col="4"
					@click="topHandle"
				>
					<u-grid-item
						v-for="(listItem,listIndex) in list2"
						:key="listIndex"
					>
						<u-icon
							:customStyle="{paddingTop:20+'rpx'}"
							:name="listItem.name"
							:size="35"
						></u-icon>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- <view>
				<u-tabs style="font-size: 14px;" :activeStyle="{
					color: '#1875FF',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize:'14px'
				}" :inactiveStyle="{
					color: '#00000080',
					transform: 'scale(1)',
					fontSize:'14px'
				}" lineColor='#1875FF' :list="list3" @click="tabClick"></u-tabs>
			</view> -->
			<view class="tabView">
				<view class="tabItem" :style="[{marginLeft:index==1?'2px':'16px'}]" v-for="(item,index) in list3" @click="tabClick(index)">
					<view :class="['tabTitle',currentTab==index?'tabTitleSel':'tabTitleNor']">{{item.name}}</view>
					<view class="tabLine" v-if="currentTab==index"></view>
				</view>
			</view>
			<view style="padding: 16px;">
				<view v-for="(item, index) in dataList" :key="index" class="uListItem" >
					<view style="display: flex;flex-direction: column" @click="loadMoreHandle(item)" v-if="currentTab==0">
						<text style="font-size: 16px;">{{item.theme}}</text>
						<text style="margin-top: 5px;font-size: 12px;color: #999999;">{{item.createdAtView}}</text>
					</view>
					<view style="display: flex;flex-direction: row;padding: 6px;" @click="loadMoreHandle(item)" v-else>
						<image src="" style="width: 50px;height: 50px;border-radius: 5px" :src="item.cover"></image>
						<view style="display: flex;flex-direction: column;flex: 1;margin-left: 8px;">
							<text style="font-size: 14px;flex: 1;">{{item.theme}}</text>
							<text style="margin-top: 5px;font-size: 12px;color: #999999;">{{item.createdAtView}}</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		
	</div>
</template>
	
<script>
	import noti from '@/api/noti.js'
	import news from '@/api/news.js'
	import swiper from '@/api/swiper.js'
	import mine from '@/api/mine.js'
	export default{
		data(){
			return{
				StatusBar: this.StatusBar,
				CustomBar: 0,//this.$statusBarHeight
				TopHeight:0,
				currentTab:0,
				searchValue:'',
				pageNo:1,
				pageSize:5,
				userInfo:{},
				userInfo2:{},
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx",
					marginBottom: "20rpx"
				},
				list1: [
					'https://l-cllyert.oss-accelerate.aliyuncs.com/video_file/banner648990.png'
				],
				indexList:[1,2,3,4,5],
				dataList:[],
				swiperList:[],
				list2: [{
					name: '/static/img/home_jiayuanfengqing.png',
					title: '嘉园风情'
					},
					{
						name: '/static/img/icon_hjwenhua.png',
						title: '航嘉文化'
					},
					{
						name: '/static/img/home_hangjiaxingzheng.png',
						title: '航嘉行政'
					},
					{
						name: '/static/img/home_jiaruzhaopin.png',
						title: '航嘉招聘'
					}
				],
				list3: [{
					name: '通知公告',
				}, {
					name: '新闻动态',
				}]
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				this.TopHeight = this.CustomBar+5;//this.StatusBar+this.CustomBar;
			}})
			this.swiperListRequest()
		},
		onShareAppMessage() {
			return{
				title: "魅力嘉园2",
				path: '/pages/home/home',
				success(res) {
					console.log('分享成功', res);
				},
				fail(err) {
					console.error('分享失败', err);
				}
			}
		},
		onShareTimeline() {
			return {
				title:'魅力嘉园'
			}
		},
		onShow() {
			this.initUserInfo()
		},
		onLoad(options) {
			
		},
		beforeDestroy() {
		    console.log('页面即将销毁');
		  },
		  destroyed() {
		    console.log('页面已销毁');
		  },
		  onUnload() {
		    console.log('页面卸载');
		  },
		methods:{
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo)
				}
				if (Object.keys(this.userInfo).length>0) {
					this.getUserHandle();
				}
			},
			getUserHandle(){
				mine.getUserHandle({id:this.userInfo.id}).then(res =>{
					this.userInfo2 = res;
				}).catch(err =>{
					
				})
			},
			searchHandle(){
				this.requestHandle()
			},
			swiperHandle(){
				return;
				uni.previewImage({
					indicator: "none",
					loop: false,
					urls: this.list1,
				})
			},
			loadMoreHandle(item){
				let urlStr = '/packageHome/pages/homeDetail/index?id='+item.id+"&type="+this.currentTab;
				if(this.currentTab==0){
					urlStr = '/packageHome/pages/homeDetail/index3?id='+item.id+"&type="+this.currentTab;
				}
				uni.navigateTo({
					url: urlStr
				})
			},
			swiperListRequest(){
				swiper.listHandle({}).then(res =>{
					let records = res.records;
					let swipList = [];
					if(Array.isArray(records) && records.length>0){
						for(let i=0;i<records.length;i++){
							swipList.push(records[i]['url'])
						}
					}
					if(swipList.length>0){
						this.list1 = swipList;
					}
				}).catch(err =>{
					
				})
			},
			queryList(pageNo, pageSize) {
				this.pageNo = pageNo;
				this.pageSize = pageSize;
				this.requestHandle()
			},
			requestHandle(){
				if(this.currentTab==0){
					noti.listHandle({page:this.pageNo,size:this.pageSize,theme:this.searchValue}).then(res =>{
						let records = res.records;
						if(this.pageNo==1){
							this.dataList = records;
						}else{
							this.dataList.concat(records)
						}
						this.$refs.paging.complete(res.records);
					}).catch(error =>{
						this.$refs.paging.complete(false);
					})
				}else{
					news.listHandle({page:this.pageNo,size:this.pageSize,theme:this.searchValue}).then(res =>{
						let records = res.records;
						if(this.pageNo==1){
							this.dataList = records;
						}else{
							this.dataList.concat(records)
						}
						this.$refs.paging.complete(records);
					}).catch(error =>{
						this.$refs.paging.complete(false);
					})
				}
			},
			tabClick(value){
				this.currentTab = value;//.index;
				this.dataList = [];
				this.$refs.paging.reload()
			},
			topHandle(value){
				switch (value){
					case 0://嘉园风情
						uni.navigateTo({
							url: '/packageHome/pages/carbonNeutrality/index?carbonType=0'
						})
						break;
					case 1://双碳文化
						uni.navigateTo({
							url: '/packageHome/pages/carbonNeutrality/index?carbonType=1'
						})
						break;
					case 2://航嘉行政
						if (Object.keys(this.userInfo2).length>0 && this.userInfo2.dutyStatus != 2) {
							uni.showModal({
								title:"请先完成实名认证，是否去认证？",
								complete: (res) => {
									// console.log(res)
									if (res.confirm) {
										uni.navigateTo({
											url: '/pageageMine/pages/completeInfo'
										})
									}
								}
							})
						}else{
							uni.navigateTo({
								url:'/packageHome/pages/jiahangxingzheng/index'
							})
						}
						break;
					case 3://加入招聘
						uni.navigateTo({
							url:"/packageHome/pages/recruit/index"
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rich-text-limit-3-lines {
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 6;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	.loadMoreView{
		width:100%;
		height: 30px;
		display: flex;
		justify-content: center;
		margin-top: 5px;
		align-items: center;
		background-color: white;
		box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.5);
		color: #1875FF;
		font-size: 14px;
	}
	.bigView{
		background-color: #F5F7FA;//#F7F7F7;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}
	.topView{
		width: 100vw;
		height: 600rpx;
		position: fixed;
		background: linear-gradient( 193deg, #3275FA 0%, #3D9CFF 48%, rgba(97,173,253,0) 100%);
		background: linear-gradient(to bottom, #3275FA,#3D9CFF, #F7F7F7);
	}
	.homeTitle{
		color: #FFFFFF;
		margin-left: 16px;
		font-size: 16px;
		font-weight: bold;
	}
	.tabView{
		width: 100vw;
		height: 38px;
		// background-color: red;
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
	}
	.tabItem{
		width: 80px;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin-left: 16px;
		// background-color: orange;
		justify-content: center;
		// align-items: center;
		
	}
	.tabTitle{
		height: 34px;
		// background-color: blue;
		display: flex;
		// justify-content: center;
		align-items: center;
	}
	.tabTitleSel{
		font-size: 16px;
		color: black;
		font-weight: bold;
	}
	.tabTitleNor{
		font-size: 14px;
		color: #313742;
	}
	.tabLine{
		width: 94rpx;
		height: 8rpx;
		border-radius: 2px;
		// background-color: orange;
		background: linear-gradient(to right, #337AFA,#DFE630, #DFE63000);
	}
	.notiTheme{
		padding: 16px;
	}
	.notiContent{
		padding: 16px;
	}
	.searchView{
		width: calc(100vw - 32px);
		height: 36px;
		background-color: #FFFFFF;
		margin-left: 16px;
		border-radius: 18px;
		display: flex;
		flex-direction: row;
	}
	.topSwiper{
		position: relative;
		width: calc(100vw - 32px);
		margin-left: 16px;
		margin-top: 32rpx;
		border-radius: 16px;
		.swiperTitle{
			position: absolute;
			top: 10px;
			z-index: 2;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-weight: bold;
			color: #000000;
			line-height: 19;
		}
	}
	.uListItem{
		width: calc(100vw-#{32px});
		margin-bottom: 12px;
		background-color: white;
		border-radius: 12px;
		// padding-bottom: 10px;
		padding: 10px;
		// padding-top: 10px;
		// padding-bottom: 10px;
		.itemImg{
			// width: calc(100vw-#{32px});
			width: 100%;
			height: 140px;
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
		}
	}
	.cu-custom{
		// background-color: orange;
		/* display: flex; */
		/* align-items: center; */
		background: linear-gradient(to bottom, #FAFAD2, #FFFFF0);
	}
	.title{
		/* background-color: green; */
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.first{
		display: flex;
		flex-direction: column;
		// width:95%;
		width: calc(100vw - #{30px});//calc(100vw-50px);
		margin-top: 20px;
		border-radius: 10px;
		background-color: white;
		align-items: center;
		justify-content: center;
		margin-left: 15px;
		&-item{
			width: 100%;
			// width: calc(100vw - #{30px});
			height: 60px;
			background-color: green;
			display: flex;
			align-items: center;
			// padding-left: 10px;
			padding-right: 10px;
		}
	}
	.grid-text {
	        font-size: 12px;
	        color: #333333;
	        padding: 10rpx 0 20rpx 0rpx;
	        /* #ifndef APP-PLUS */
	        box-sizing: border-box;
	        /* #endif */
	    }
</style>